<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
  name: "AddCustomSymbol.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;
      map.setZoom(8)

      let geojson = {
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "properties": {
              "message": "Foo",
              "iconSize": [60, 60]
            },
            "geometry": {
              "type": "Point",
              "coordinates": [
                106.324462890625,
                29.024695711685304
              ]
            }
          },
          {
            "type": "Feature",
            "properties": {
              "message": "Bar",
              "iconSize": [50, 50]
            },
            "geometry": {
              "type": "Point",
              "coordinates": [
                106.2158203125,
                29.97189158092897
              ]
            }
          },
          {
            "type": "Feature",
            "properties": {
              "message": "Baz",
              "iconSize": [40, 40]
            },
            "geometry": {
              "type": "Point",
              "coordinates": [
                106.29223632812499,
                29.28151823530889
              ]
            }
          }
        ]
      };
      // add markers to map
      geojson.features.forEach(function (marker) {
        // create a DOM element for the marker
        let el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage = `url(${window.location.origin}/mapbox-test/libs/mapbox/assets/` + marker.properties.iconSize[0] + '.jpg)';
        el.style.width = marker.properties.iconSize[0] + 'px';
        el.style.height = marker.properties.iconSize[1] + 'px';

        el.addEventListener('click', () => {
          window.alert(marker.properties.message);
        });

        // add marker to map
        new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
      });
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.marker) {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
</style>